<template>
  <div class="document">
    <el-tooltip effect="dark" placement="left" content="下载">
      <el-link
        @click="downloadDocument(document)"
        :underline="false"
        class="cover-container"
      >
        <img class="cover" :src="defaultImg" />
        <img
          v-if="document.type == 'docx' || document.type == 'doc'"
          class="type-icon"
          src="@/assets/img/svg/word.svg"
          alt=""
        />
        <img
          v-else-if="document.type == 'pdf'"
          class="type-icon"
          src="@/assets/img/svg/pdf.svg"
          alt=""
        />
        <img
          v-else-if="document.type == 'ppt' || document.type == 'pptx'"
          class="type-icon"
          src="@/assets/img/svg/ppt.svg"
          alt=""
        />
        <img
          v-else-if="document.type == 'xlsx'"
          class="type-icon"
          src="@/assets/img/svg/excel.svg"
          alt=""
        />
        <img
          v-else-if="document.type == 'txt'"
          class="type-icon"
          src="@/assets/img/svg/txt.svg"
          alt=""
        />
      </el-link>
    </el-tooltip>

    <el-link class="doctitle" type="info" :underline="false">{{
      document.document_title
    }}</el-link>
    <div class="property">
      <el-link :underline="false" @click="documentThumb(d)" type="info">
        <i class="fa fa-heart"></i>
        {{ document.like_count }}</el-link
      >

      <el-link
        @click="downloadDocument(document)"
        :underline="false"
        type="info"
      >
        <svg
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
          focusable="false"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M17.8395 8.05827C17.1837 5.16226 14.5944 3 11.5 3C7.91015 3 5 5.91015 5 9.5C5 10.0204 5.06115 10.5264 5.17665 11.0114C2.84229 11.1772 1 13.1234 1 15.5C1 17.9853 3.01469 20 5.49995 20H17C20.3137 20 23 17.3137 23 14C23 10.9712 20.7558 8.46659 17.8395 8.05827ZM11.6799 17.7333C11.8653 17.8878 12.1347 17.8878 12.3201 17.7333L17.4695 13.4421C17.6492 13.2924 17.5433 13 17.3095 13H14V9.5C14 9.22386 13.7761 9 13.5 9H10.5C10.2239 9 10 9.22386 10 9.5V13H6.69051C6.45669 13 6.35084 13.2924 6.53047 13.4421L11.6799 17.7333Z"
            fill="currentColor"
          ></path>
        </svg>
        {{ document.download_count ? document.download_count : 0 }}
      </el-link>
      <el-link
        v-if="!isMobile"
        @click="openCommentDialog(document)"
        :underline="false"
        type="info"
      >
        <svg
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
          focusable="false"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
            fill="currentColor"
          ></path>
        </svg>
        {{ document.comment_count }}</el-link
      >
      <el-link v-else :underline="false" type="info">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
          focusable="false"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
            fill="currentColor"
          ></path>
        </svg>
        {{ document.comment_count }}</el-link
      >
    </div>
    <div class="date">{{ document.create_time | formatDate }}</div>
  </div>
</template>

<script>
import { downLoadFile } from '@/api/cos'
import defaultImg from '@/assets/img/defaultImg.jpg'

export default {
  props: {
    document: {
      type: Object,
      required: true
    }
  },
  components: {},
  data() {
    return {
      currentDocumentId: null, // 当前下载的文档ID
      defaultImg: defaultImg
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 下载文档
    async downloadDocument(d) {
      console.log(d)
      this.$confirm('是否下载文档?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 添加下载数

          // cos对象存储
          // const link = document.createElement('a');

          // // Specify that the link should be downloaded when clicked
          // link.setAttribute('download', '');
          // // Programmatically click the link to start the download
          // link.click();
          // // Clean up by removing the temporary anchor element
          // link.remove();
          // Set the href attribute to the document_url
          try {
            // const test = await getAllFile()

            // console.log('all', test)
            const regex = /\/([^/]+)$/
            const match = d.document_url.match(regex)

            // 提取匹配结果中的内容
            if (match) {
              const lastSegment = match[1]
              console.log(decodeURIComponent(lastSegment)) // 输出："5%E3%80%81%E6%AF%95%E4%B8%9A%E8%AE%BA%E6%96%87.doc"
              const response = await downLoadFile(
                'file/' + decodeURIComponent(lastSegment)
              )
              console.log(response)
              // 如果获取文件成功
              if (response.statusCode == 200) {
                // 假设下载的数据存储在 response 对象中
                const fileData = response.Body // 或 response.Body，根据实际情况获取文件内容

                // 处理二进制数据
                const blob = new Blob([fileData], {
                  type: 'application/octet-stream'
                })

                // 创建临时的 URL
                const url = URL.createObjectURL(blob)

                // 创建一个 <a> 标签用于触发下载
                const link = document.createElement('a')
                link.href = url
                link.download = decodeURIComponent(lastSegment) // 设置下载文件的名称
                link.style.display = 'none'

                // 将 <a> 标签添加到 DOM 中
                document.body.appendChild(link)

                // 触发下载
                link.click()

                // 清理临时的 URL 和 <a> 标签
                URL.revokeObjectURL(url)
                document.body.removeChild(link)
                const res = await this.$API.document.addDownloadNum(d.id)
                if (res.status == 200) {
                  this.$emit('getDocumentList')
                } else {
                  return this.$mesage.error('下载失败')
                }
              }
            } else {
              return this.$message.error('文件不存在')
            }

            // link.href = d.document_url;
            // cos对象存储
          } catch (error) {
            console.log(error)
            this.$message.error('下载失败,请联系管理员')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 打开评论对话框
    openCommentDialog(document) {
      this.ShowDialogVisible = true
      this.currentDocumentId = document.id
    }
  }
}
</script>

<style scoped>
</style>
